<template>
  <div class="app-container">
    <!--查询的表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="课程类别：">
        <el-select v-model="searchObj.subjectParentId" clearable @change="subjectChange">
          <el-option v-for="item in subjectList"
                     :key="item.id"
                     :label="item.title"
                     :value="item.id"
          />
        </el-select>
        <el-select v-model="searchObj.subjectId" clearable>
          <el-option v-for="item in subjectLevelTwoList"
                     :key="item.id"
                     :label="item.title"
                     :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="课程标题：">
        <el-input v-model="searchObj.title" clearable/>
      </el-form-item>

      <el-form-item label="讲师：">
        <el-select v-model="searchObj.teacherId" clearable>
          <el-option v-for="item in teacherList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="fetchData">查询</el-button>
      <el-button type="danger" @click="clearData">清空</el-button>
    </el-form>

    <!-- 用于展示的表格-->
    <el-table :data="list" border stripe>
      <el-table-column label="#" width="50">
        <template slot-scope="scope">
          {{(currentPage - 1) * pageSize + scope.$index+1}}
        </template>
      </el-table-column>

      <el-table-column label="封面" width="200" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.cover" :alt="scope.row.title" width="100%">
        </template>
      </el-table-column>
      <el-table-column label="课程信息" align="center">
        <template slot-scope="scope">
          <a>{{ scope.row.title }}</a>
          <p>
            分类：{{ scope.row.subjectParentTitle }} > {{ scope.row.subjectTitle }}
          </p>
          <p>
            课时：{{ scope.row.lessonNum }} /
            浏览：{{ scope.row.viewCount }} /
            付费学员：{{ scope.row.buyCount }}
          </p>
        </template>
      </el-table-column>

      <el-table-column label="讲师" align="center">
          <template slot-scope="scope">
            {{scope.row.teacherName}}
          </template>
      </el-table-column>

      <el-table-column label="价格(元)" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.price == 0" type="success">免费</el-tag>
          <el-tag v-else>{{scope.row.price}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="课程状态"  align="center" >
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 'Draft' ? 'warning' : 'success'">{{ scope.row.status === 'Draft' ? '未发布' : '已发布' }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{scope.row.gmtCreate.substr(0,10)}}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
         <router-link :to="'/course/info/'+scope.row.id">
           <el-button type="text" size="mini" icon="el-icon-edit">修改</el-button>
         </router-link>
          <router-link :to="'/course/chapter/'+scope.row.id">
            <el-button type="text" size="mini" icon="el-icon-edit">编辑大纲</el-button>
          </router-link>
          <el-button type="text" size="mini" icon="el-icon-delete" @click="removeById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      align="right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 10, 15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import courseApi from "@/api/course";
import teacherApi from "@/api/teacher";
import subjectApi from "@/api/subject";
import Link from "../layout/components/Sidebar/Link";
export default {
  name: "list",
  components: {Link},
  data() {
    return {
      currentPage: '1',
      pageSize: '2',
      total: '5',
      list: [], //课程列表
      searchObj: { //查询条件
        subjectId: ''// 解决查询表单无法选中二级类别
      },
      teacherList: [], // 讲师列表
      subjectList: [], // 一级分类列表
      subjectLevelTwoList: [] // 二级分类列表,
    }
  },
  created() {
    this.initTeacherList()
    this.initSubjectList()
    this.fetchData()
  },
  methods: {
    initTeacherList() {
      teacherApi.list().then(res => {
        this.teacherList = res.data.items
      })
    },
    initSubjectList() {
      subjectApi.getNestedTreeList().then(res => {
        this.subjectList = res.data.items
      })
    },
    fetchData() {
      courseApi.getPageList(this.currentPage,this.pageSize,this.searchObj).then(res => {
        this.list = res.data.rows
        this.total = res.data.total
      })
    },
    clearData() {
      this.searchObj = {}
    },
    removeById(id) {
      this.$confirm("此操作将永久删除该课程，以及该课程下的章节和视频，是否继续?","提示",{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        courseApi.removeCourseById(id).then(res => {
            this.fetchData()
            this.$message.success(res.message)
          }).catch(error => {
            if (res === 'cancel') {
              this.$message.info('取消删除')
            }
        })
      })

    },
    subjectChange(val) {
      console.log("val",val)
      this.subjectList.forEach(item => {
        if (item.id == val) {
          this.subjectLevelTwoList = item.children
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    }
  }
}
</script>

<style scoped>

</style>
